<script setup lang="ts">
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
    
    const props = defineProps({
        messageList: {
        type: Array,
        default: () => []
       },
       type: {
        type: String
       }
    })
    const router = useRouter()
    
    const gotoSystemList = (things_id: any, receive_id: any) => {
        if (props.type == 'system') {
            router.push('/message/systemList/')
        }
        if (props.type == 'talk') {
            router.push(`/message/talk/${things_id}/${receive_id}`)
        }
        
    }
</script>

<template>
   <dl v-for="(item,index) in messageList" :key="index" @click="gotoSystemList(item.things_id, item.receive_id)">
        <dd>
            <img v-if="item.receive_is_read" :src="item.receive_is_read" alt="">
            <img v-else src="@/assets/img/icon/icon-message.png" alt="">
            <span v-if="item.is_show"></span>
        </dd>
        <dt>
            <h3>{{ item.title }}<span>{{ item.create_time }}</span></h3>
          <p>{{ item.content }}</p>
        </dt>
   </dl>
</template>


<style scoped>
dl {
    font-size: 0.64rem;
    color: #666;
    margin: 0 0.67rem;
    border-bottom: 1px solid #eee;
    display: flex;
    padding: 0.9rem 0;
    align-items: center;
}
dl dd {
    position: relative;
    margin-right: 0.56rem; 
}
 dl dd img {
    width: 2.61rem;
    height: 2.61rem;
}
dl dd span {
    position: absolute;
    top:0;
    right:0;
    width: 0.32rem;
    height: 0.32rem;
    background: #FF0000;
    border-radius: 50%;
}
dl dt {
    flex: 1
}
dl dt h3 {
    font-weight: 500;
    font-size: 0.8rem;
    color: #333333;
    line-height: 0.8rem;
    margin-bottom: 0.43rem;
}
dl dt h3 span{
    float: right;
    color:#999;
    font-size: 0.64rem;
    font-weight: 100;    
}
dl dt p {
    font-size: 0.69rem;
    line-height: 0.69rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>